<!--
 * @Description: 开通城市
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2023-05-09 14:18:46
 * @LastEditTime: 2023-09-04 11:38:43
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
-->

<template>
  <div class="lb-store-classify">
    <top-nav :title="navTitle" />
    <div class="page-main">
      <el-row>
        <el-form
          @submit.native.prevent
          :model="subForm"
          ref="subForm"
          label-width="140px"
          class="config-form"
        >
          <el-form-item label="是否定位所在城市" prop="index_city_find">
            <el-switch
              :disabled="
                $route.meta.pagePermission[0].auth.includes('cityFind')
                  ? false
                  : true
              "
              v-model="subForm.index_city_find"
              :active-value="1"
              :inactive-value="0"
              @change="submitFormInfo"
            >
            </el-switch>
            <lb-tool-tips>
              假设系统已开通城市「成都、重庆、云南」，当用户在手机端{{
                $t('action.attendantName')
              }}列表页面将地址定位到「贵州」时：
              <div class="mt-md">
                选择开启，页面将显示当前城市暂未开放{{
                  $t('action.attendantName')
                }}上线，用户可操作「期待开通、直接做代理（非代理商才可申请）」按钮
              </div>
              <div class="mt-sm">
                选择关闭，系统将返回距离用户所选地址最近的城市以及该城市下的{{
                  $t('action.attendantName')
                }}数据
              </div>
            </lb-tool-tips>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        style="width: 100%"
      >
        <el-table-column prop="city" label="投票城市"></el-table-column>
        <el-table-column prop="num" label="投票人数"></el-table-column>
        <el-table-column prop="update_time" label="更新时间">
          <template slot-scope="scope">
            <p>{{ scope.row.update_time | handleTime(1) }}</p>
            <p>{{ scope.row.update_time | handleTime(2) }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="是否开通">
          <template slot-scope="scope">
            <el-tag
              size="small"
              :type="scope.row.status === 1 ? 'danger' : 'success'"
              >{{ statusType[scope.row.status] }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="table-operate">
              <lb-button
                size="mini"
                plain
                type="primary"
                @click="toOpenCity(scope.row)"
                v-hasPermi="`${$route.name}-openCity`"
                v-show="scope.row.status === 1"
                >确认开通</lb-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <lb-page
        :batch="false"
        :page="searchForm.page"
        :pageSize="searchForm.limit"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
      </lb-page>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data () {
    return {
      navTitle: '',
      loading: false,
      statusType: { 1: '未开通', 2: '已开通' },
      searchForm: {
        page: 1,
        limit: 10,
        title: ''
      },
      tableData: [],
      total: 0,
      subForm: {
        index_city_find: 0
      }
    }
  },
  created () {
    this.navTitle = this.$t('menu.SurveyCityList')
    this.getDetail()
    this.getTableDataList()
  },
  methods: {
    async getDetail () {
      let { data } = await this.$api.system.configInfo()
      this.subForm.index_city_find = data.index_city_find
    },
    resetForm (form) {
      this.$refs[form].resetFields()
      this.getTableDataList(1)
    },
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getTableDataList()
    },
    getCover (img) {
      this.subForm.cover = img
    },
    async getTableDataList (flag) {
      if (flag) this.searchForm.page = 1
      this.loading = true
      let { searchForm } = this
      let { code, data } = await this.$api.survey.expectationCityList(searchForm)
      this.loading = false
      if (code !== 200) return
      this.tableData = data.data
      this.total = data.total
    },
    toOpenCity (item) {
      let { id, city } = item
      this.$confirm(`你确认要开通“${city}”吗？`, this.$t('tips.reminder'), {
        confirmButtonText: this.$t('action.comfirm'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        this.updateItem(id, 2)
      }).catch(() => {

      })
    },
    async updateItem (id, status) {
      this.$api.survey.expectationCityUpdate({ id, status }).then(res => {
        if (res.code === 200) {
          this.$message.success(this.$t('tips.successOper'))
          this.getTableDataList()
        }
      })
    },
    async submitFormInfo () {
      await this.$api.system.configUpdate(this.subForm)
      this.$message.success(this.$t('tips.successSub'))
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-form {
  .el-input,
  .el-select,
  .el-input-number {
    width: 300px;
  }
}
</style>
